<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link  th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
    <link th:href="@{/ruoyi/css/ry-ui.css}" rel="stylesheet"/>
    <link th:href="@{/css/my.css}" rel="stylesheet"/>

    <!--页面样式文件-->
    <link rel="stylesheet" th:href="@{/dist/css/main.css}">
    <link rel="stylesheet" th:href="@{/dist/css/media.css}">
    <style>
        .filter-btn {
            margin-right: 32px;
        }

        .filter-btn .btn {
            background-color: #fff;
            border: 1px solid #f0f0f8;
            color: #333;
        }

        .filter-btn .active {
            background-color: #45d09b !important;
            border-color: #45d09b !important;
            color: #ffffff;
        }
    </style>
</head>
<body class="bd-bg">
<!--右侧主体-->
<div class="chicken-contentPart">
    <div class="chicken-main">
        <!--搜索区域-->
        <div class="row rowNew">
            <div class="col-sm-12 search-area">
                <form id="formId">
                    <div class="select-list">
                        <ul class="ulForm clearfix">
                            <li class="select-time">
                                <label>选择时间： </label>
                                <div class="fl inputTime-outer">
                                    <input type="text" class="time-input" th:value="${beginTime}" id="startTime" placeholder="开始时间"
                                           name="params[beginPlanTime]"/>
                                    <div class="icon-rili"></div>
                                </div>
                                <span>--</span>
                                <div class="fl inputTime-outer">
                                    <input type="text" class="time-input" th:value="${endTime}" id="endTime" placeholder="结束时间"
                                           name="params[endPlanTime]"/>
                                    <div class="icon-rili"></div>
                                </div>
                                <div class="btn-outer fl">
                                    <a class="btn btn-primary mlr_8" onclick="reloadIt()"><i
                                            class="fa fa-search"></i>&nbsp;搜索</a>
                                </div>
                            </li>
                            <li class="btn-group">
                                <a class="thisYear btn btn-primary mlr_8">本年</a>
                                <a class="thisMonth btn btn-primary mlr_8">本月</a>
                                <a class="thisDay btn btn-primary mlr_8">本日</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
        </div>
        <!--统计区域-->
        <div class="row rowNew">
            <div class="statistics-area">
                <div class="statistics-list clearfix">
                    <div class="statistics-item col-xs-6 col-sm-4 col-lg-2">
                        <div class="main color01 active">
                            <div class="indro">饲料投入</div>
                            <div class="indro"><span th:text="${feedAmount}"></span><span class="unit">kg</span></div>
                        </div>
                    </div>
                    <div class="statistics-item col-xs-6 col-sm-4 col-lg-2">
                        <a href="#" onclick="zType()">
                        <div class="main color03">
                            <div class="indro" onclick="zType()">主饲料：<span th:text="${zfeedAmount}"></span><span class="indro">kg</span></div>
                            <div class="unit">占比<span th:text="${zfeedAmountRatio}"></span>%</div>
                        </div>
                        </a>
                    </div>
                    <div class="statistics-item col-xs-6 col-sm-4 col-lg-2">
                        <a href="#" onclick="fType()">
                       <div class="main color03">
                            <div class="indro">辅饲料：<span th:text="${ffeedAmount}"></span><span class="indro">kg</span></div>
                           <div class="unit">占比<span th:text="${ffeedAmountRatio}"></span>%</div>
                       </div></a>
                    </div>

                    <!-- <div class="statistics-item col-xs-6 col-sm-4 col-lg-2">
                         <div class="main color05">
                             <div class="indro">内销三</div>
                             <div class="num">1358<span class="unit">kg</span></div>
                         </div>
                     </div>
                     <div class="statistics-item col-xs-6 col-sm-4 col-lg-2">
                         <div class="main color06">
                             <div class="indro">内销四</div>
                             <div class="num">1358<span class="unit">kg</span></div>
                         </div>
                     </div>-->
                </div>
            </div>
        </div>
        <!--图表区域-->
        <div class="row rowNew">
            <div class="filter-btn fl-r">
                <a class="btn" id="yearBtn">年</a>
                <a class="btn active" id="monthBtn">月</a>
                <a class="btn" id="dayBtn">日</a>
            </div>
            <div class="echart-item col-sm-12">

                <div id="main" style="width:100%;height:460px;"></div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<!--echart-->
<script th:src="@{/dist/libs/echarts/dist/echarts.min.js}"></script>

<!-- 遮罩层 -->
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/ruoyi/js/common.js?v=3.4.0}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=3.4.0}"></script>
<script th:src="@{/ruoyi/js/my-common-js.js}"></script>
<script>
    $(function(){

    });
</script>
<script th:inline="javascript">
    var ctx = [[@{
        /}]];
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var xData=['09', '10', '11', '12', '01', '02', '03', '04', '05', '06', '07', '08'];
        var zfeed = [320, 220, 240, 160, 120, 204, 280, 240, 190, 110, 210, 210]
        var ffeed = [320, 220, 240, 160, 120, 204, 280, 240, 190, 110, 210, 210];

        var currentSort = '共计总量';
        var timeSort = 2;//月份
        function initEchart() {
            var url = ctx + "system/ncChickenWorkNotice/chickenFeedQuery";
            var data = {
                beginTime: $('#startTime').val(),
                endTime: $('#endTime').val(),
                dataSpan: timeSort
            };
            myPost(url, data, function (data) {
                if (data.code == 0) {
                    var x = [];
                    var zcount = [];
                    var fcount = [];
                    $(data.rows).each(function (i, e) {
                        x.push(e.x);
                        zcount.push(e.zcount);
                        fcount.push(e.fcount);
                    });
                    setBarData(currentSort,'year',x,zcount,fcount);
                }

            }, function () {

            })
        }

        function setBarData(sortIdx,timeSort,xData,zfeed,ffeed) {
            if (xData & zfeed & ffeed) {
                xData = xData;
                zfeed = zfeed;
                ffeed = ffeed;
            }
            var _title = '鸡肉产量图'
            // 指定图表的配置项和数据
            var option01 = {

                /* title: {
                text: '折线图',
                subtext: '模拟数据',
                x: 'center'
            },*/

                legend: {
                    data: ['主饲料', '辅饲料'],
                    right: '3%',
                    selectedMode: false
                },

                //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
                grid: {
                    top: '16%',   // 等价于 y: '16%'
                    left: '3%',
                    right: '8%',
                    bottom: '3%',
                    containLabel: true
                },

                // 提示框
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            // 设置x轴颜色
                            color: '#52adff'
                        }
                    },
                    // 设置X轴数据旋转倾斜
                    axisLabel: {
                        rotate: 30, // 旋转角度
                        interval: 0  //设置X轴数据间隔几个显示一个，为0表示都显示
                    },
                    // boundaryGap值为false的时候，折线第一个点在y轴上
                    boundaryGap: false,
                    data: xData
                },

                yAxis: {
                    name: '数值',
                    type: 'value',
                    min: 0, // 设置y轴刻度的最小值
                    // max: 1800,  // 设置y轴刻度的最大值
                    splitNumber: 9,  // 设置y轴刻度间隔个数
                    axisLine: {
                        lineStyle: {
                            // 设置y轴颜色
                            color: '#52adff'
                        }
                    },
                },

                series: [
                    {
                        name: '主饲料',
                        data: zfeed,
                        type: 'line',
                        // 设置小圆点消失
                        // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                        symbol: 'none',
                        // 设置折线弧度，取值：0-1之间
                        smooth: 0.5,
                    },

                    {
                        name: '辅饲料',
                        data: ffeed,
                        type: 'line',
                        // 设置折线上圆点大小
                        symbolSize: 8,
                        smooth: 0.5,
                        itemStyle: {
                            normal: {
                                // 拐点上显示数值
                                label: {
                                    show: true
                                },
                                borderColor: 'red',  // 拐点边框颜色
                                lineStyle: {
                                    width: 5,  // 设置线宽
                                    type: 'solid'  //'dotted'虚线 'solid'实线
                                }
                            }
                        }
                    },

                ]


            };


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option01);
        }
        setFrontTimeShortcutBtns([[${beginTime}]], [[${endTime}]]);
        setBarData(currentSort,'year');

        function reloadIt() {
            var link = ctx + "system/ncChickenWorkNotice/feedAmounts";
            var s = $('#startTime').val();
            var e = $('#endTime').val();

            link += "?beginTime=" + s + "&endTime=" + e;
            window.location.href = link;
        }
        $(".main").click(function () {
            $(".main").removeClass("active");
            $(this).addClass("active");
        });

        $('.thisYear').click(function () {
            $('#startTime').val(new Date().getFullYear() + "-01-01");
            reloadIt();
        });

        $('.thisMonth').click(function () {
            var d = new Date();
            var m = d.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            $('#startTime').val(new Date().getFullYear() + "-" + m + "-01");
            reloadIt();
        });
        $('.thisDay').click(function () {
            var d = new Date();
            var m = d.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            $('#startTime').val(new Date().getFullYear() + "-" + m +"-"+ new Date().getDate());
            reloadIt();
        });
        $('#yearBtn').click(function () {
            timeSort = 1;
            $(this).addClass('active').siblings().removeClass('active')
            initEchart()
            // setBarData(currentSort, 'year')
        })


        $('#monthBtn').click(function () {
            timeSort = 2;
            $(this).addClass('active').siblings().removeClass('active')
            console.log(currentSort)
            initEchart()
            // setBarData(currentSort, 'month')
        })


        $('#dayBtn').click(function () {
            timeSort = 3;
            $(this).addClass('active').siblings().removeClass('active')
            initEchart();
            // setBarData(currentSort, 'day')
        })
        initEchart();
        function zType() {
            var link=ctx + "system/ncChickenFeedLog";
            $.modal.openTab("鸡舍主饲料列表", link);

        }
        function fType(){

            var link=ctx + "system/ncChickenFeedLog2";
            $.modal.openTab("鸡舍辅饲料列表", link);
        }


        setTitle("饲料管理",false)
</script>
</body>
</html>
